<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div >
				<div id="app"> 
					<table border="1px" class="table table-striped   text-center">
						<tr class="table-primary">
							
							<td>订单编号</td>
							<td>下单时间</td>
							<td>订单金额(元)</td>
							<td>服务费(元)</td>
							<td>手机号</td>
							<td>订单状态</td>
							<td>发货状态</td>
							<td>操作</td>
						</tr>
						<tr v-for="order in orders" class="table-success">
							
							<td><a href="#" @click=godetail(order)>{{order.order_no}}</a></td>
							<td>{{order.order_date}}</td>
							<td>{{order.total_money}}</td>
							<td>{{order.service_charge}}</td>
							<td>{{order.phone}}</td>
							<td v-if="order.status=='1' ">已支付</td>
							<td v-else>未支付</td>
							<td v-if="order.issend=='1' ">已发货</td>
							<td v-else>未发货</td>
							<td v-if="order.status=='0' ">
								<button @click="pay(order)" class="btn btn-success">支付</button>
							</td>
							<td v-else>
								<button @click="del(order)" class="btn btn-primary">删除</button>
							</td>

						</tr>
					</table>
					
					<span style=" float: right;margin-right: 30px;"><button class="btn btn-success" @click="previous(currentPage)">上一页</button>&emsp;当前第&emsp;<span id="page" style="color: blue;"></span>&emsp;页&emsp;<button class="btn btn-success" @click="next(currentPage)">下一页</button>&emsp;共&emsp;<span id="totalpages" style="color: blue;" ></span>&emsp;页</span>
					
				</div>
	<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			orders:[],
			total:0,
			currentPage:'',
			totalpages:''
		
		},
		//页面加载完后触发
		mounted(){
			axios.get("order/find?page=1").then(res => {
				this.orders=res.data.data;
				this.currentPage=res.data.currentPage;
				this.totalpages= res.data.totalPages;
				//当前页数
				console.info(res);
				document.getElementById("page").innerHTML= this.currentPage;
				document.getElementById("totalpages").innerHTML= this.totalpages;
			})
		},
		methods:{
			pay:function(order){
				var sessionStorage = window.sessionStorage;   //浏览器本地的临时数据库
				sessionStorage.setItem("order_no", order.order_no);
				sessionStorage.setItem("total_money", order.total_money);
				sessionStorage.setItem("o_id", order.o_id);
				window.location.href="alipay.html";
			},
			del:function(order){
				//先删数据库
				axios.get("order/del?o_id="+order.o_id+"&order_no="+order.order_no).then(res => {
					//刷新页面上的数据
					location.reload();
			})
				//再删除页面上的数据
				for(var i=0;i<this.orders.length;i++){
					var o = this.orders[i];
					if(o.oid==order.oid){
						this.orders.splice(i,1);
						break;
					}
				}	
			},
			//跳转页面查看商品详情
			godetail:function(order){
				window.location.href="detail.html?pid="+order.o_id;
			},
			//下一页
			next:function(currentPage){
				
				var page=currentPage+1;
				if(page>this.totalpages){
					return;
				}else{
				axios.get("order/find?page="+page).then(res => {
					this.orders=res.data.data;
					this.totalpages= res.data.totalPages;
					this.currentPage=currentPage+1;
					//当前页数
					document.getElementById("page").innerHTML= this.currentPage;
					document.getElementById("totalpages").innerHTML= this.totalpages;
				})
				}
			},
			//上一页
			previous:function(currentPage){
							var page=currentPage-1;
							if(page<1){
								return;
							}else{
							axios.get("order/find?page="+page).then(res => {
								this.orders=res.data.data;
								this.totalpages= res.data.totalPages;
								this.currentPage=currentpage-1;
								//当前页数
								document.getElementById("page").innerHTML= this.currentPage;
								document.getElementById("totalpages").innerHTML= this.totalpages;
							})
							}
						}
			
		},
		watch:{
			
		}
	});
	</script>
</body>
</html>